<!--  -->
<template>
  <div class="detail_attribute">
    <h2>商品参数</h2>
    <div class="attribute" v-for="item in attribute" :key="item.name">
      <div class="p">
        <span style="color: #999; width: 27%; text-align: right">{{
          item.name
        }}</span>
        <p
          style="
            color: #000;
            width: 73%;
            margin-left: 10px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          "
        >
          {{ item.value }}
        </p>
      </div>
    </div>

    <!-- <div class="goods_desc">
        <p>
          <img src="http://yanxuan.nosdn.127.net/34a6a0daa3f7a397a38aad14cb9e90fa.jpg" alt="">
        </p>
        
      </div> -->
  </div>

  <div class="goods_desc" v-html="info.goods_desc" style="width: 100%"></div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "DetailAttribute",
  props: {
    attribute: {
      type: Array,
      default() {
        return [];
      },
    },
    info: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  setup() {
    return {};
  },
});
</script>

<style lang="scss">
.detail_attribute {
  padding: 20px;
  width: 100%;
  background-color: #fff;
  margin-top: 20px;
}
h2 {
  margin-top: 40px;
  font-weight: normal;
  font-size: 40px;
}
.attribute {
  margin-top: 20px;
}
.attribute .p {
  display: flex;
  height: 60px;
  width: 100%;
  background-color: #efefef;
  line-height: 60px;
  font-size: 30px;
}
.goods_desc p {
  width: 100%;
  /* height: 520px; */
}
.goods_desc img {
  display: block;
  width: 100%;
  /* height: 100%; */
}
</style>
